<template>
    <div class="scene-view" :class="pageScene">
        <transition name="scene">
            <navigation>
                <router-view class="router-container"/>
            </navigation>
        </transition>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';

    import {
        Component
    } from 'vue-property-decorator';

    @Component({
        name: `Scene`
    })
    export default class Scene extends Vue {
        direction: string = `back`;

        get pageScene() {
            return `page-${this.direction}`
        }

        created() {
            this.$navigation.on(`back`,this.onBack);
            this.$navigation.on(`forward`,this.onForward);
        }

        onBack() {
            this.direction = `back`;
        }

        onForward() {
            this.direction = `forward`;
        }
    }
</script>

<style lang="scss" scoped>
    .scene-view {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .router-container {
        top: 0;
        left: 0;
        position: absolute;
        transition: all .5s cubic-bezier(.36, .66, .04, 1);
    }

    @mixin view-right() {
        transform: translate3d(100%, 0, 0);
    }

    @mixin view-left() {
        transform: translate3d(-100%, 0, 0);
    }

    @mixin view-center() {
        transform: translate3d(0, 0, 0);
    }

    .page-back {
        .scene-enter {
            @include view-left();
            opacity: 0.5;
            z-index: 1;
        }
        .scene-enter-to {
            @include view-center();
            opacity: 1;
            z-index: 1;
        }
        .scene-leave {
            @include view-center();
            opacity: 1;
            z-index: 2;
        }
        .scene-leave-active {
            box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        }
        .scene-leave-to {
            @include view-right();
            opacity: 1;
            z-index: 2;
        }
    }

    .page-forward {
        .scene-enter {
            @include view-right();
            opacity: 1;
            z-index: 2;
        }
        .scene-enter-active {
            box-shadow: 0 0 10px rgba(0, 0, 0, .15);
        }
        .scene-enter-to {
            @include view-center();
            opacity: 1;
            z-index: 2;
        }
        .scene-leave {
            @include view-center();
            opacity: 0.5;
            z-index: 1;
        }
        .scene-leave-to {
            @include view-left();
            opacity: 0.5;
            z-index: 1;
        }
    }
</style>